<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="../resource/bootstrap/css/bootstrap.css">
	<script src="../resource/jquery-2.1.1.js"></script>
	<script src="../resource/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="accordion" id="accordion2">
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle"  href="#collapseOne">
				Collapsible Group Item #1
			</a>
		</div>
		<div id="collapseOne" class="accordion-body collapse ">
			<div class="accordion-inner">
				Anim pariatur cliche...
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle"  href="#collapseTwo">
				Collapsible Group Item #2
			</a>
		</div>
		<div id="collapseTwo" class="accordion-body collapse in">
			<div class="accordion-inner">
				Anim pariatur cliche...
			</div>
		</div>
	</div>
</div>
<script>
	//创建折叠组件
	$(".accordion-body").collapse({
		toggle: true,
		parent: '#accordion2'
	});
	//为触发元素添加单击事件，在回调函数里打开折叠元素，此时由于上面已经指定了parent属性，所以Bootstrap会为我们自动将其他折叠组件关闭
	$('.accordion-heading').on('click', function () {
		var self = this;
		$(self).nextAll().eq(0).collapse("show");
	})
</script>
</body>
</html>